<style scoped>
.payinfolist>>>.weui-form-preview__hd .weui-form-preview__value {
    font-size: 1.2em;
    padding-right: 20px;
}

.payinfolist {
    background: #e3e3e3;
}

.page-infinite-wrapper {
    background: #e3e3e3;
}

.payinfolist>>>.weui-cells {
    margin-top: 0;
    background: #e3e3e3;
}

.payinfolist>>>.weui-loadmore__tips {
    background: #e3e3e3;
    ;
}

.payinfolist>>>.weui-loadmore {
    margin-bottom: 0;
}

.weui-form-preview {
    margin: 5px;
    border-radius: 5px;
}

.rj-cell-child {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
    text-align: left;
}

.rj-cell-child.max span {
    font-size: 16px;
    padding-right: 20px;
}

.rj-cell-child.minpad {
    padding-right: 10px !important;
}

.rj-cell-child label {
    color: #333;
    font-size: 14px;
}

.rj-cell-child span {
    padding-left: 20px;
    font-size: 14px;
    color: #333;
}

.rj-cell-child .tip {
    font-size: 16px;
    color: #333;
}

.rj-cell-child i {
    font-size: 18px;
    font-style: normal;
    color: #333;
}

.rj-cell-child-tit {
    background: #eee;
    font-size: 14px;
    padding: 5px 15px;
    border-bottom: 1px solid #ddd;
}

.weui-form-preview__ft .weui-form-preview {
    background: #f5f5ef;
}

.weui-form-preview__ft {
    line-height: normal;
}

.weui_tab_bd {
    background: #eee;
}

.weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
}

.weui-form-preview__hd label,
.weui-form-preview__hd em {
    font-size: .9em !important;
}

.weui_navbar {
    white-space: nowrap;
    overflow: scroll;
    display: block !important;
    border-bottom: 1px solid #BCBAB6;
    font-size: 0;
    /*background: #fafafa;*/
}

.weui_navbar_item {
    font-size: 14px;
    display: inline-block;
    width: 20%;
    padding: 13px 0;
    background: #fff;
    position: relative;
    color: #888;
}

.weui_navbar_item.weui_bar_item_on {
    background-color: #f5f5f5;
    color: #00913a;
}

.weui_navbar:after {
    border-bottom: 0;
}

.weui_navbar_item:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    border-right: 1px solid #cccccc;
    color: #cccccc;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    font-size: 10px;
}

.weui-panel__bd {
    text-align: left;
}

.hoverbar {
    background: #03A9F4;
    position: fixed;
    bottom: 100px;
    right: 20px;
    height: 50px;
    line-height: 50px;
    width: 50px;
    z-index: 100;
    font-size: 30px;
    border-radius: 50%;
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.5);
    color: #fff;
}

.flowbtn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1000;
}

.selectInfo {
    background-color: #efeff4;
}

.sel {
    background-color: #fff;
    text-align: center;
    border-radius: 5px;
}
</style>
<template>
<div class="listwrap">
<!--    <div class="hoverbar" v-show="showAddbtn" @click="addItem">+</div>-->
    <SearchBar @doSearch="doSearch" />
    <!-- <div class="weui-cell selectInfo">
        <div class="weui-cell__bd sel">
            <input class="weui-input" type="text" id='job' placeholder="点击选择条件">
        </div>
    </div> -->
    <div class="weui_tab">
        <div class="weui_navbar order-tabhd">
            <a class="weui_navbar_item" v-if="currTab == ''" v-for="(item, index) in tabTitles" :key="item.guid" :style="'width:' + tabWidth" :class="{ weui_bar_item_on: postParams.status == item.stats }" href="javaScript:;" @click="switchStatus(item.stats)">{{item.name}}</a>
            <a class="weui_navbar_item" v-if="currTab != ''" v-for="(item, index) in tabTitles" :key="item.guid" :style="'width:' + tabWidth" :class="{ weui_bar_item_on: index == currTab }" href="javaScript:;" @click="switchStatus(item.stats)">{{item.name}}</a>
        </div>
    </div>

    <div class="weui_tab_bd" style="background-color: #fff">
        <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
            <mescroll-vue ref="mescroll" id="wrapper" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
                <div class="weui-form-preview" v-for="(item, index) in data" :key="item.guid" :ref="item.guid">
                    <div class="flowbtn" @click="openLogs(item.guid, item.srguid, item.departid)"><img src="@/assets/icon-history.png" style="width: 16px" /></div>
                    <div class="weui-form-preview__hd" @click="viewItem(item.guid)">
                        <label class="weui-form-preview__label">支付申请编号</label>
                        <em class="weui-form-preview__value">{{item.code}}</em>
                    </div>
                    <div class="weui-form-preview__bd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">部门</label>
                            <span class="weui-form-preview__value">{{item.departname}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">采收主体</label>
                            <span class="weui-form-preview__value">{{item.orgname}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">收款人</label>
                            <span class="weui-form-preview__value">{{item.plantorname}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">车数</label>
                            <span class="weui-form-preview__value">{{item.carnum}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">结算金额</label>
                            <span class="weui-form-preview__value">{{item.amount}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">已付金额</label>
                            <span class="weui-form-preview__value">{{item.preamount}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                          <label class="weui-form-preview__label">已付比例</label>
                          <span class="weui-form-preview__value">{{item.percent}}%</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">未付金额</label>
                            <span class="weui-form-preview__value">{{item.recamount}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">付款金额</label>
                            <span class="weui-form-preview__value">{{item.applyAmount}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                          <label class="weui-form-preview__label">付款比例</label>
                          <span class="weui-form-preview__value">{{item.applyPercent}}%</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">申请时间</label>
                            <span class="weui-form-preview__value">{{item.createdate}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">申请人</label>
                            <span class="weui-form-preview__value">{{item.operatorrealname}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">状态</label>
                            <span class="weui-form-preview__value">{{item.statusname}}</span>
                        </div>
                      <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">备注</label>
                        <span class="weui-form-preview__value">{{item.remark}}</span>
                      </div>
                    </div>
                    <div class="weui-form-preview__ft" style="line-height: 50px;">
                        <a class="weui-form-preview__btn weui-form-preview__btn_primary" v-for="(node, index) in item.nodes" :key="node.guid" href="javascript:" v-if="filterPerm(node.permission, item.srguid, item.operatorid)" @click="doAct(node.operate, item.guid, node.guid, node.name, node.annex, node.refuseflag)">{{node.name}}</a>
                    </div>
                </div>
            </mescroll-vue>
        </div>

    </div>
</div>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue'
import SearchBar from '@/components/common/SearchBar'
import OperationLogs3 from '@/components/common/OperationLogs3'
import axios from 'axios'
export default {
    name: 'BillList',
    components: {
        SearchBar,
        MescrollVue
    },
    data() {
        return {
            wrapperHeight: 600,
            data: [],
            postParams: {
                status: '00'
            },
            mescroll: null, // mescroll实例对象
            mescrollDown: {},
            mescrollUp: { // 上拉加载的配置.
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: 5 //每页数据条数,默认10
                },
                htmlNodata: '<p class="upwarp-nodata">-- 我是有底线的 --</p>',
                noMoreSize: 1,
                empty: {
                    warpId: "wrapper", //父布局的id (1.3.5版本支持传入dom元素)
                    tip: "暂无相关数据~" //提示
                }
            },
            wrapperHeight: 600,
            userid: localStorage.userid,
            permissions: [],
            tabTitles: [],
            tabWidth: '25%',
            currTab: '',
            showAddbtn: false,
            listPc: '',
            values: ''
        }
    },
    created() {        //列表页头部不允许滑动
        document.getElementsByTagName("body")[0].className = "bg";
    },
    mounted() {
        //获取tab标签页title
        this.getListpc()
        this.getLabels();
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - 40;
        this.getPermission()

        if (this.$route.query.code != undefined) {
            this.postParams.search = this.$route.query.code;
        }
        if (this.$route.query.label != undefined) {
            this.currTab = this.$route.query.label != '' ? this.$route.query.label - 1 : 0;
        }

    },
    methods: {
        addItem: function () {
            //this.$router.push({name: 'AddBill'});
            location.href = `http://${location.host}/harvest/Freightorder!bill.action`
        },
        getListpc() {
            let that = this
            let params = {
                functiontype: 22
            }
            this.axios({
                    method: 'get',
                    url: '/harvest/Procurementbatch!findBatchbyFun.action',
                    params
                })
                .then(res => {
                    if (res.data.batchs !== undefined) {
                        var datalist = new Array;
                        //遍历数据，获取数组的id和name
                        for (var i = 0; i < res.data.batchs.length; i++) {
                            var info = {
                                "title": res.data.batchs[i].name,
                                "value": res.data.batchs[i].guid
                            };
                            datalist.push(info);
                        }
                        $("#job").select({
                            title: "查询条件",
                            multi: false,
                            items: datalist,
                            beforeClose: function (values, titles) {
                                console.log(values)
                                $.showLoading("数据加载中");
                                let params = {
                                    pbguid: values,
                                }
                                axios({
                                        method: 'get',
                                        url: '/pay/Payinfo!page.action',
                                        params: params
                                    })
                                    .then(response => {
                                        if (response.data.msg == 'success') {
                                            that.data = response.data.pagelist.rows
                                            that.postParams.status = null
                                            that.getListpc()
                                            $.hideLoading();
                                        } else {
                                            that.toastError("系统错误");
                                        }
                                    })
                                    .catch(error => {
                                        console.log(error.rows)
                                        if (error.rows == undefined) {
                                            that.toastError("暂无数据");
                                        }
                                    })
                                return true;

                            }
                        });
                    } else {
                        that.toastError("系统错误");
                    }
                })
        },

        getLabels: function () {
            this.axios({
                method: 'get',
                params: {
                    flowid: 19
                },
                url: '/produce/Label!getLabels.action',
            }).then((response) => {
                if (response.data.msg == 'success') {
                    this.$nextTick(() => {
                        this.tabTitles = response.data.labels;
                        //tab最大宽度20%，默认选中第一个tab页
                        this.tabWidth = response.data.labels.length < 6 ? (100 / response.data.labels.length) + '%' : '20%';
                        if (this.$route.query.label != undefined) {
                            this.postParams.status = this.tabTitles[this.currTab].stats;
                            this.getPageData();
                        } else if (this.postParams.status != this.tabTitles[0].stats) {
                            this.postParams.status = this.tabTitles[0].stats;
                            this.getPageData();
                        } else {
                            this.postParams.status = this.tabTitles[0].stats;
                        }
                    })
                } else {
                    this.toastError("系统错误");
                }
            })
        },
        getPermission: function () {
            this.axios({
                method: 'get',
                params: {
                    opttype: 22
                },
                url: '/produce/OperatorPermission!getOperPerm.action',
            }).then((response) => {
                if (response.data.msg == 'success') {
                    this.permissions = response.data.permission;
                    //判断是否有添加权限
                    this.showAddbtn = this.permissions.some(item => {

                        return item.permission == 30 || item.permission == 38
                    });
                } else {
                    this.toastError("系统错误");
                }

            })
        },
        filterPerm: function (perm, roomid, operatorid) {
            let status = false;
            if (perm == 0) {
                status = this.userid == operatorid;
            } else {
                let permissions = this.permissions;
                if (permissions.length == 0) return;
                for (let i = 0; i < permissions.length; i++) {
                    if (perm == permissions[i].permission) {
                      if (permissions[i].permss.scopetype == 7) {
                        if (permissions[i].srguid == roomid) {
                          status = true;
                        } else {
                          status = status == true ? true :false;
                        }
                      } else {
                        status = true;
                      }
                    }
                }

            }
            return status;
        },
        mescrollInit(mescroll) {
            this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
        },
        upCallback(page, mescroll) {
            this.postParams.pageNo = page.num;
            this.postParams.pageSize = page.size;
            this.postParams.functiontype = 22;
            this.postParams.pbguid = this.values
            // 联网请求
            this.axios({
                method: 'get',
                url: '/pay/Payinfo!page.action',
                params: this.postParams
            }).then((response) => {
                if (response.data.msg == 'success') {
                    let res = response.data.pagelist != undefined ? response.data.pagelist : {
                        rows: []
                    };
                    // 如果是第一页需手动置空列表
                    if (page.num === 1 && this.data.length != 0) this.data = [];
                    // 把请求到的数据添加到列表
                    this.data = this.data.concat(res.rows);
                    // 数据渲染成功后,隐藏下拉刷新的状态
                    this.$nextTick(() => {
                        mescroll.endSuccess(res.rows.length)
                    })
                    //将获取上一访问列表临时页码恢复正常
                    if (this.mescrollUp.page.size > 5) {
                        this.mescrollUp.page.num = this.$store.state.list.pageNo;
                        this.mescrollUp.page.size = 5;
                    }
                } else {
                    this.toastError("系统错误");
                }

            }).catch((e) => {
                // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescroll.endErr()
            })
        },
        doAct: function (name, guid, nodeid, actname, annex, refuseflag) {
            let acts = this.$store.state.acts;
            this.$router.push({
                name: acts[name],
                query: {
                    guid: guid,
                    status: this.postParams.status,
                    conditionSR: this.conditionSR,
                    nodeid: nodeid,
                    title: actname,
                    annex: annex,
                    refuseflag: refuseflag
                }
            });
        },
        doRefuse: function (id, nodeid) {
            let that = this;
            $.prompt({
                title: '确定要拒绝？',
                text: '',
                input: '',
                empty: false, // 是否允许为空
                onOK: function (input) {
                    //防止重复提交
                    $('.subbtn').attr("disabled", true).css("pointer-events", "none");
                    //显示提交状态
                    $.showLoading("正在提交");
                    let postData = {};
                    postData.payinfoid = id;
                    postData.remark = input;
                    postData.flowtempid = nodeid;

                    that.axios({
                        method: 'post',
                        url: '/sales/Payinfo!refuse.action',
                        params: postData
                    }).then((response) => {
                        //恢复提交按钮可点击
                        $('.subbtn').attr('disabled', false).css("pointer-events", "auto");
                        //关闭提交状态
                        $.hideLoading();

                        if (response.data.msg == 'success') {
                            that.toastSuccess('提交成功!');
                            that.getPageData();
                        } else if (response.data.msg == 'canotopt') {
                            that.toastText('不允许的操作！');
                        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
                            //不不设置提示
                        } else {
                            that.toastError('系统错误');
                        }
                    }).catch(function (error) {
                        //恢复提交按钮可点击
                        $('.subbtn').attr('disabled', false).css("pointer-events", "auto");
                        //关闭提交状态
                        $.hideLoading();
                        that.toastError('系统错误');
                    });
                },
                onCancel: function () {
                    //点击取消
                }
            });
        },
        doSearch: function (keywords) {
            this.postParams.search = keywords;
            this.getPageData();
        },
        viewItem: function (id) {
            this.$router.push({
                name: 'ViewBill',
                query: {
                    id: id
                }
            });
        },
        getPageData: function () {
            $('#wrapper').scrollTop(0);
            this.data = [];
            this.mescroll.resetUpScroll();
        },
        switchStatus: function (sta) {
            this.postParams.status = sta;
            this.getPageData();
        },
        openLogs: function (id, srguid, departid) {
            this.$router.push({
                name: 'OperationLogs3',
                query: {
                    orderid: id,
                    srguid: srguid,
                    departid: departid
                }
            });
        }

    },
    activated() {
        //列表页头部不允许滑动
        document.getElementsByTagName("body")[0].className = "bg";

        //判断是否是返回上一页
        if (this.$store.state.list.reffer != this.$options.name) return;
        //获取上一次访问列表数据
        this.mescrollUp.page.num = 0;
        this.mescrollUp.page.size = this.$store.state.list.pageNo * this.mescrollUp.page.size;
        this.getPageData();
        //定位
        this.$nextTick(function () {
            let position = this.$store.state.list.postion //返回页面取出来
            $('#wrapper').scrollTop(position);
            let status = this.$store.state.list.status;
            this.postParams.status = status;
        })

    },
    beforeRouteLeave(to, from, next) {
        //取消列表页头部不允许滑动
        document.body.removeAttribute("class", "bg");

        let position = $('#wrapper').scrollTop();
        let status = this.postParams.status;
        this.$store.commit('setPosition', position) //离开路由时把位置存起来
        this.$store.commit('setStatus', status)
        this.$store.commit('setPageNo', this.mescrollUp.page.num);
        this.$store.commit('setReffer', this.$options.name);
        next()
    }
}
</script>
<style scoped>

</style>
